<template>
  <div>
    <!-- 页面区域 -->
    <div class="page-view">
      <div style="display: flex; gap: 10px; margin-bottom: 20px">
        <el-button type="primary" @click="handleEditClick">新增</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="title" label="标签名称" align="center" />
        <el-table-column prop="createTime" label="创建时间" align="center" />
        <el-table-column prop="operation" label="操作" fixed="right">
          <template #default="scope">
            <el-button @click="handleEditClick(scope.row)">编辑</el-button>
            <el-button type="danger" @click="confirmDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件，使用 Element Plus 的 Pagination 组件 -->
      <el-pagination
        style="margin-top: 20px"
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :page-sizes="[10, 20, 50, 100]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :pager-count="5"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 弹窗区域 -->
    <el-dialog
      v-model="dialogFormVisible"
      :title="dialogForm.id ? '编辑' : '新增'"
      width="500"
    >
      <el-form :model="dialogForm">
        <el-form-item label="标签名称">
          <el-input v-model="dialogForm.name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">Cancel</el-button>
          <el-button type="primary" @click="handleEdit"> Confirm </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import * as petTagApi from "@/api/petTag.js";
import { ElMessage, ElMessageBox } from "element-plus";
const tableData = ref([]);
const dialogFormVisible = ref(false);
const queryParam = ref({ account: "" });
const dialogForm = ref({
  id: "",
  name: "",
});
const pagination = ref({
  page: 0,
  size: 5,
  total: 0,
});
const getTableData = async () => {
  const params = {
    page: pagination.value.page,
    size: pagination.value.size,
    account: queryParam.value.account,
  };
  const res = await petTagApi.getPageData(params);
  console.log(res);
  tableData.value = res.data.records;
  pagination.value.total = res.data.total;
};

// const handleSearch = () => {
//   pagination.value.page = 0
//   getTableData();

// };

const handleCurrentChange = (e) => {
  pagination.value.page = e;
  getTableData();
};

const handleSizeChange = (e) => {
  pagination.value.size = e;
  getTableData();
};

const handleEditClick = (row) => {
  dialogForm.value = {
    id: "",
    name: "",
  };
  if (row) {
    dialogForm.value = {
      id: row.id,
      name: row.title,
    };
  }

  dialogFormVisible.value = true;
};

const handleRemove = () => {
  dialogFormVisible.value = true;
};

const handleEdit = async () => {
  if (dialogForm.value.id) {
    await petTagApi.editTag(dialogForm.value);
  } else {
    await petTagApi.addTag(dialogForm.value);
  }
  dialogFormVisible.value = false;
  getTableData();
};

const confirmDelete = (row) => {
  ElMessageBox.confirm("确定要删除该数据?", "Warning", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    type: "warning",
  })
    .then(() => {
      petTagApi.removeTag(row.id);
      ElMessage({
        type: "success",
        message: "Delete completed",
      });
      getTableData();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
};
onMounted(() => {
  getTableData();
});
</script>

<style scoped lang="scss">
.page-view {
  background: #fff;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
</style>
